<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>历史客户</title>
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap-table.css">
<link rel="stylesheet" href="css/common.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap2/js/bootstrap.min.js"></script>
<script src="js/bootstrap2/js/bootstrap-table.js"></script>
<script src="js/bootstrap2/js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript" src="js/sharefunction.js"></script>
<style type="text/css">
.textInput { /*与文本框对其*/
	vertical-align: text-bottom;
}

.content {
	margin: 5px;
}

.search {
	vertical-align: top;
}

table a {
	color: #08c;
}
a:hover{
	cursor: pointer;
}
</style>
</head>
<body>
	<div class="content">
		<div id="para">
			<span class="textInput">迁出日期</span>
			<input type="text" name="quitDate" class="Wdate" onClick="WdatePicker({ dateFmt: 'yyyy-MM-dd'})" />
			<span class="textInput">客户名称</span>
			<input type="text" name="customerName">
			&nbsp;
			<button class="btn btn-danger radius search">搜索</button>
		</div>
		<div>
			<table id="historyCustomer"></table>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(function() {
		//初始化表格
		initTable();
		//绑定搜索事件
		$("#para .search").click(searchRun);
	});
	var lyi = null;//记录加载层索引
	function searchRun() {
		lyi = layer.load(2);
		var quitDate = $("#para input[name='quitDate']").val();
		var customerName = $("#para input[name='customerName']").val();
		if (quitDate == "")
			quitDate = null;
		if (customerName == "")
			customerName = null;
		//刷新列表
		$("#historyCustomer").bootstrapTable('refresh', {
			silent : true,
			query : {
				quitDate : quitDate,
				customerName : customerName
			}
		});
	}
	function initTable(params) {
		$("#historyCustomer").bootstrapTable({
			method : "post", //使用get请求到服务器获取数据  
			url : "customerInfo/findHistoryCustomerByProject", //获取数据的Servlet地址  
			striped : true, //表格显示条纹  
			pagination : true, //启动分页  
			pageSize : 10, //每页显示的记录数  
			pageNumber : 1, //当前第几页  
			pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表  
			sidePagination : "server", //表示服务端请求  
			contentType : 'application/x-www-form-urlencoded',
			//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			//设置为limit可以获取limit, offset, search, sort, order  
			queryParamsType : "undefined",
			onLoadSuccess : function() {//数据加载成功关闭加载层(针对点击搜索按钮时)
				layer.close(lyi);
			},
			queryParams : function queryParams(params) { //设置查询参数  
				var param = {
					pageNumber : params.pageNumber,
					pageSize : params.pageSize,
					projectId : top.projectID,
					quitDate : params.quitDate,
					customerName : params.customerName
				};
				return param;
			},
			columns : [ {
				field : 'XH',
				title : '序号',
				formatter : function(value, row, index) {
					return index + 1;
				},
				width : '10px'
			}, {
				field : 'lastmodifyDate',
				title : '迁出时间',
				formatter : carDataFormat,
				width : '15%'
			}, {
				field : 'customerIdentity',
				title : '客户类型',
				formatter : function(value, row, index) {
					return value == 1 ? "租赁人" : "产权人";
				},
				width : '80px'
			}, {
				field : 'name',
				title : '客户名称',
				width : '25%'
			}, {
				field : 'noName',
				title : '楼号'
			}, {
				field : 'unitName',
				title : '单元'
			},{
				field : 'floorName',
				title : '楼层'
			},{
				field : 'fkRoomInfo',
				title : '房间'
			},{
				field : 'opt',
				title : '操作',
				formatter : optFormat
			} ]
		});
	}

	//日期格式化
	function carDataFormat(value, row, index) {
		return new Date(value).format("yyyy-MM-dd");
	}
	//操作
	function optFormat(value, row, index) {
		var opt = "<a onclick='toDetail(\"" + row.sourceId+ "\",\"" + row.id + "\",\"" + row.hid + "\");'>查看</a>&nbsp;&nbsp;";
		//row.id代表房间id
		//opt += "<a href='javascript:;' onclick='roomHistory(\"" + row.sourceId+ "\",\"" + row.id + "\");' >房间记录</a>&nbsp;&nbsp;";
		if(row.customerIdentity == 1){
			opt += "<a onclick='toRecovery(\"" + row.sourceId+ "\",\"" + row.id + "\",\"" + row.hid + "\");'>恢复</a>";
		}else{
			opt += "&nbsp;&nbsp;<a>----</a>";
		}
		return opt;
	}
	//查看该客户入住后所有历史房间
	function roomHistory(customerId, roomId) {
		top.layer.open({
			type : 2,
			title : '客户信息',
			shadeClose : false,
			shade : 0.1,
			maxmin : true, //开启最大化最小化按钮
			area : [ '70%', '60%' ],
			end : parent.updateRoom,//销毁回调,刷新当前页
			content : 'roomInfo/toRoomMergeHistory/' + customerId + '/'+ roomId
		});
	}
	
	//查看客户详情
	function toDetail(customerId, roomId,hid) {
		top.layer.open({
			type : 2,
			title : '客户信息',
			shadeClose : false,
			shade : 0.1,
			maxmin : true, //开启最大化最小化按钮
			area : [ '90%', '80%' ],
			end : parent.updateRoom,//销毁回调,刷新当前页
			//content : 'customerInfo/toHistoryCustomerDetail/' + customerId+ '/' + roomId
			content : 'customerInfo/toCustomerHistoryDetail/' + roomId+ '/' + customerId+'/'+hid
		})
	}
	
	//恢复历史客户
	function toRecovery(customerId, roomId,hid) {
		layer.confirm('确定恢复该条信息吗？', {
			btn : [ '确定', '取消' ] //按钮
		}, function() {
			//点击确定时，恢复该条数据
			$.ajax({
				url : "customerInfo/doRecoveryHistoryCustomer", //请求的url地址
				async : true, //请求是否异步，默认为异步
				data : {
					"customerId" :customerId,//客户id
					"roomId" :roomId,//房间id
					"hid":hid//历史数据id
				}, //参数值
				type : "GET", //请求方式

				success : function(req) {
					if (req.success) {
						layer.msg("恢复成功", {
							anim : 5,
							time : 1500
						}, function() {
							location.reload();
						});

					}else{
						layer.msg(req.msg, {
							anim : 5,
							time : 2500
						}, function() {
							location.reload();
						});
					}
				}
			});
		}, function() {
			layer.close();
		});
	}
</script>
</html>